<!-- 菜单管理 -->
<template>
  <div class="page-box h100 display-flex czbj" :data-cjsde="cjsde">
    <div>
      <n-button type="primary" size="medium" @click="xmss">添加菜单</n-button>
    </div>
    <div>
      <n-data-table
        class="mt10"
        size="small"
        :columns="columns"
        :data="data"
        :row-key="rowKey"
        default-expand-all
      />
    </div>
    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>菜单编辑</div>
      </template>
      <div>
        <n-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120"
          :inline="false"
          size="normal"
          label-placement="left"
        >
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi span="24" label="标题:" path="cate_name">
              <n-input
                v-model:value="form.cate_name"
                type="text"
                placeholder="请输入标题"
                size="medium"
                clearable
              ></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="英文标题:" path="cate_name" class="mt20">
              <n-input
                v-model:value="form.yinwen"
                type="text"
                placeholder="英文标题"
                size="medium"
                clearable
              ></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="网站链接:" path="" class="mt20">
              <n-input
                type="text"
                v-model:value="form.url"
                placeholder="请输入链接"
                size="medium"
                clearable
              ></n-input>
            </n-form-item-gi>

            <n-form-item-gi span="24" label="备注" path="" class="mt20">
              <n-input
                type="textarea"
                v-model:value="form.beizhu"
                placeholder="请输入备注"
                size="medium"
                clearable
              ></n-input>
            </n-form-item-gi>
            
            <n-form-item-gi :span="8" label="图标" class="mt20">
              <div
                class="headPortrait-box vertical-center sz"
                @click="iconPup = true"
              >
                <img :src="form.big_pic" v-if="form.big_pic" />
                <i class="iconfont dx-tupian fz30" v-else> </i>
              </div>
            </n-form-item-gi>
            <n-form-item-gi span="16" label="排序:" path="" class="mt20">
              <n-input
                type="text"
                v-model:value="form.paixu"
                placeholder="请输入排序"
                size="medium"
                clearable
              ></n-input>
            </n-form-item-gi>
            <n-form-item-gi :span="24" label="头图" class="mt20">
              <div
                class="headPortrait-box vertical-center sz w100"
                @click="toutussdrt = true"
              >
                <img :src="form.toutu" v-if="form.toutu" />
                <i class="iconfont dx-tupian fz30" v-else> </i>
              </div>
            </n-form-item-gi>


          </n-grid>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
          <n-button type="primary" size="medium" @click="addcd" class="ml20"
            >确认</n-button
          >
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="iconPup" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>上传图片</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="fenleisd"> </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="iconPup = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="toutussdrt" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>上传图片</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="tjtoutuer"> </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="toutussdrt = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref, h, nextTick, computed } from "vue";
import { NButton, NImage, c } from "naive-ui";
import photoGallery from "../../components/util/photoGallery";

import store from "../../store";
import {
  dxget,
  dialog,
  dxdel,
  iconData,
  dxpost,
  routeSwitch,
  qurl,
} from "../../util/index";
const showModal = ref(false);
const formRef = ref();
const iconPup = ref(false);
const MenuStatus = ref(0); // 0新增 1编辑 2添加子菜单
const zobj = ref();
const zijibj = ref();
const toutussdrt =ref()
const isbj = ref();
let bjid = 0;
const cz = qurl();
const data = ref();
const cjsde = computed(() => {
  cz.type = store.state.storequery.type;
  initData();
  return store.state.storequery;
});
const form = ref({
  cate_name: "",
  url: "",
  big_pic: "",
  type: cz.type || 1, //1.产品 2.新闻 3.菜单
  roleId: localStorage.id,
  children: [],
});
let kjsser = "";
const getImg = (data) => {
  kjsser = data;
};
const setImg = () => {
  form.value.big_pic = kjsser;
  iconPup.value = false;
};


let kjsserer = "";
const getImger = (data) => {
  kjsserer = data;
};
const setImger = () => {
  form.value.toutu = kjsserer;
  toutussdrt.value = false;
};



const columns = [
  // {
  //     type: 'selection'
  // },
  {
    title: "id",
    key: "id",
  },
  {
    title: "标题",
    key: "cate_name",
  },
  {
    title: "图标",
    key: "big_pic",
    render(row, index) {
      if (row.big_pic) {
        return h(NImage, { src: row.big_pic, class: "dsfsdrtrtrt imgjz" });
      }
    },
  },
  {
    title: "页面链接",
    key: "url",
    align: "center",
  },
  {
    title: "排序",
    align: "center",
    render(row, index, c) {
      if (row.pid) {
        return row.paixu;
      } else {
        return [
          h("i", {
            class:
              "iconfont dx-jiantou_qiehuanxiangxia sz fz26 " +
              (index == data.value.length - 1 ? "jinzhhser" : ""),
            onClick: async () => {
              const dq = data.value[index];
              const sj = data.value[index + 1];
              await dxpost(
                "dxgjAdmin/dxclassify",
                { id: dq.id, paixu: sj.paixu },
                "put"
              );
              await dxpost(
                "dxgjAdmin/dxclassify",
                { id: sj.id, paixu: dq.paixu },
                "put"
              );
              initData();
            },
          }),
          h("i", {
            class:
              "iconfont dx-jiantou_qiehuanxiangshang sz fz26 " +
              (index == 0 ? "jinzhhser" : ""),
            onClick: async () => {
              const dq = data.value[index];
              const sj = data.value[index - 1];
              await dxpost(
                "dxgjAdmin/dxclassify",
                { id: dq.id, paixu: sj.paixu },
                "put"
              );
              await dxpost(
                "dxgjAdmin/dxclassify",
                { id: sj.id, paixu: dq.paixu },
                "put"
              );
              initData();
            },
          }),
        ];
      }
    },
  },
  {
    title: "操作",
    align: "center",
    width: 260,
    render(row, index) {
      let imdfdsrte = [
        h(
          NButton,
          {
            quaternary: true,
            type: "info",
            onClick: async () => {
              MenuStatus.value = 1;
              form.value = JSON.parse(JSON.stringify(row));
              showModal.value = true;
            },
          },
          "编辑"
        ),
        h(
          NButton,
          {
            quaternary: true,
            type: "error",
            onClick: async () => {
              const res = await dialog("确认删除吗？");
              if (res == 1) {
                //等于1为确认删除了
                await dxdel("dxgjAdmin/dxclassify", { id: row.id });
                initData();
              }
            },
          },
          "删除"
        ),
      ];

      if (!row.pid) {
        imdfdsrte.push(
          h(
            NButton,
            {
              quaternary: true,
              type: "info",
              onClick: () => {
                MenuStatus.value = 0;
                showModal.value = true;
                form.value = {
                  cate_name: "",
                  url: "",
                  big_pic: "",
                  type: cz.type || 1,
                  roleId: localStorage.id,
                  pid: row.id,
                };
              },
            },
            "添加子菜单"
          )
        );
      }
      return imdfdsrte;
    },
  },
];

const rowKey = (row) => {
  return row.index;
};
const rules = {
  cate_name: {
    required: true,
    message: "请输入网页标题",
    trigger: "blur",
  },
};
const xmss = () => {
  MenuStatus.value = 0;
  showModal.value = true;
  form.value = {
    cate_name: "",
    url: "",
    big_pic: "",
    type: cz.type || 1,
    roleId: localStorage.id,
    children: [],
  };
};
const adss = async () => {
  // if (MenuStatus.value == 1) {
  //   form.value.pid = 0
  // }
  await dxpost(
    "dxgjAdmin/dxclassify",
    form.value,
    MenuStatus.value == 1 ? "put" : "post"
  );
  initData();
};
// 弹窗的菜单确认按钮触发事件
const addcd = async () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      adss();
    }
  });
};

const initData = async () => {
  data.value = [];
  const res: any = await dxget("dxgjAdmin/getfls?", {
    roleId: localStorage.id,
    type: cz.type,
  });
  if (res.data.length <= 0) {
    return;
  }
  console.log(res.data);
  showModal.value = false;
  data.value = res.data;
};
initData();
</script>
<style scoped>
.radio-context {
  position: relative;
  top: 6px;
}

.iconBox {
  height: 50px;
  cursor: pointer;
}

.iconBox:hover {
  background: #f8f8f8;
}
</style>